<template>
	<view class="box">
		<view class="list">
			<view class="item" v-for="(item,indx) in list" :key="item.id" 
			@click="toPage(0,'/pages/shop/shopDetail/shopDetail?id='+item.id+'&name='+item.name+'&merchantHead='+item.head+'&phone='+item.merchantPhone)">
				<view class="top">
					<view class="shopName">
						<view class="left">
							<view class="imgbox">
								<image :src="item.head" mode="" style="width:50upx;height: 50upx;"></image>
							</view>
							<view class="text">{{ item.name }}</view>
						</view>
						<view class="right">
							进入店铺
						</view>
					</view>
					<view class="intro">
						{{item.introduction}}
					</view>
				</view>
				<view class="center">
					<view class="banner">
						<image :src="item.poster" mode=""></image>
						<!-- <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true"
						 cancelable="false" :indicator-color="indicatorColor" :indicator-active-color="indicatorActive" class="swiper-box">
							<swiper-item v-for="(items, index) in item.slides" :key="index">
								<navigator :url="'/pages/index/index?id='+items.id" open-type="navigate" hover-class="other-navigator-hover" class="swiper-item">
									<image :src="items.img" mode=""></image>
								</navigator>
							</swiper-item>
						</swiper> -->
					</view>
				</view>
				<view class="bottom">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<image :src="it.detailsImgList[0]" class="img" v-for="(it,idx) in item.goodsList" :key="it+idx" 
						@click.stop="toPage(0,'/pages/goodsDetail/index?goodsId='+it.goodsId)"
						
						></image>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/user/index.js';
	export default {
		props:['list'],
		data() {
			return {
				slides: [require('../../static/img/changePhoto.jpg'), require('../../static/img/changePhoto.jpg'), require(
					'../../static/img/changePhoto.jpg')],
				indicatorDots: true,
				indicatorColor: '#000',
				indicatorActive: '#fefefe',
				autoplay: true,
				interval: 4000,
				duration: 500,
				bigShopList:[
					{
						shopId:2,
						name:'黑其外贸店',
						head:'../../static/img/chart1.png',
						introduction:'外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸',
						slides:[
							{
								id:1,
								img:'../../static/img/changePhoto.jpg'
								
							}
						],
						scrollList:[
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
						]
					},
					{
						shopId:2,
						name:'黑其外贸店',
						head:'../../static/img/chart1.png',
						introduction:'外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸外贸',
						slides:[
							{
								id:1,
								img:'../../static/img/changePhoto.jpg'
							}
						],
						scrollList:[
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
							{
								id:2,
								url:'../../static/img/avtr.png'
							},
						]
					},
				],
				parmas:{
					pageNum:1,
					pageSize:20
				}
			}
		},
		methods: {
			async getGoodsList() {
				try{
					this.parmas.pageNum += 1;
					const ret = await api.getGoodsShop(this.parmas);
					this.list = ret.data.obj;
				}catch(error){
					console.log(error)
				}
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
